<template lang="html">
  <div class="main">
      <div class="input">
            <p>
                <label>订单状态：</label>
                <el-select v-model="searchData.orderStatus">
                     <el-option value="">请选择</el-option>
                     <el-option v-for="(item,key) in orderStatus" :value="item.value" :label="item.label" :key="key">{{item.label}}</el-option>
                </el-select>
            </p>
            <p>
                <label>订单号：</label>
                <el-input placeholder="请输入订单号" v-model="searchData.orderNo"></el-input>
            </p>
            <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>

      </div>
      <tableVue :list="list" :total="total"  @sizeChange="handSize"  v-loading="loading">
            <slot>
                <el-table-column label="商品名称" align="center">
                      <template slot-scope="scope">
                            <p v-for="(item,key) in scope.row.orderProducts">
                              <span>{{item.goodsName}}</span>
                            </p>
                      </template>
                  </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="compile(scope.row)">详情
                        </el-button>
                        <el-button
                        size="mini"
                        v-if="scope.row.orderStatus == '已付款,待发货'"
                        type='success'
                        @click="shipments(scope.row)">发货
                        </el-button>
                    </template>
                </el-table-column>
            </slot>
      </tableVue>
      <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false" >
          <slot>
              <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="收货人姓名" prop="receiverName">
                    <el-input v-model="ruleForm.receiverName" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item label="收货人联系方式" prop="receiverTel">
                     <el-input v-model="ruleForm.receiverTel" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="收货人地址" prop="receiverAddress" >
                      <el-input v-model="ruleForm.receiverAddress" placeholder="请输入内容" type="textarea"></el-input>
                   </el-form-item>
                    <el-form-item label="物流单号" prop="logisticsNo">
                        <el-input v-model="ruleForm.logisticsNo" placeholder="请输入内容"></el-input>
                        <el-button type="primary"  :loading="Vloading" @click="getlogistId">查询快递公司</el-button>
                     </el-form-item>
                     <el-form-item label="快递公司" prop="logisticsNo">
                         <el-select v-model="ruleForm.logisticsCompanyCode" placeholder="请选择" :disabled="disableda">
                             <el-option value="">请选择</el-option>
                             <el-option
                               v-for="(item,key) in logistics"
                               :key="key"
                               :label="item.companyName"
                               :value="item.companyCode">
                             </el-option>
                           </el-select>
                      </el-form-item>
                     <el-form-item class="confirm">
                         <el-button type="primary"  @click="upForm('post')">确定</el-button>
                     </el-form-item>
              </el-form>
          </slot>
      </dialogVue>
  </div>
</template>

<script>
    import dialogVue from '@/components/dialog.vue'
    import {
        getOrderList,
    } from "@/api/shoppingCentre/shoppingCentre.js"
    import {
        payshipments,
        addressDetails,
        logisticsCompany,
        getLogisticsInfo
    } from "@/api/shoppingCentre/pay_shipments.js"
    import Data from './indentAdminData.js'
    import tableVue from '@/components/alltable.vue'
export default {
    components:{
      tableVue,
      dialogVue
    },
    data(){
        return JSON.parse(JSON.stringify(Data))
    },
    mounted(){
        this.getList({current:1,size:10})
    },
    methods:{
        getList(data){//列表
            this.loading = true;
            getOrderList(data).then(res=>{
                if(res.data.code=="OK"){
                    this.total = res.data.data.total;
                    this.loading = false
                    this.list.tbody = res.data.data.records.map(res=>{
                        switch(res.orderStatus){
                            case "1000":
                                res.orderStatus="下单完成，未付款";
                                break;
                            case "1001":
                                res.orderStatus="已付款,待发货";
                                break;
                            case "1002":
                                res.orderStatus="已发货,待签收";
                                break;
                            case "1003":
                                res.orderStatus="已签收";
                                break;
                            case "1004":
                                res.orderStatus="退货申请";
                                break;
                            case "1005":
                                res.orderStatus="退货中";
                                break;
                            case "1006":
                                res.orderStatus="已退货";
                                break;
                            case "1007":
                                res.orderStatus="取消交易";
                                break;
                            default:
                                break;
                        }
                        return res;
                    })
                }else{
                    // this.$message.error(res.data.$message)
                }
            })
        },
        search(){//搜索
            let obj={
                current:1,
                size:10,
                orderStatus:this.searchData.orderStatus,
                orderNo:this.searchData.orderNo,
                orderId:this.searchData.orderId
            }
            this.getList(obj)
        },
        compile(val){
            this.$router.push({path:'indentDetails',query:{data:JSON.stringify(val.orderId)}})
        },
        handSize(val){//翻页
            let obj={
                current:val,
                size:10,
                orderStatus:this.searchData.orderStatus,
                orderNo:this.searchData.orderNo,
                orderId:this.searchData.orderId
            }
            this.getList(obj)
        },
        shipments (item) {

          addressDetails(item.addressId).then(res=>{
            if (res.data.code == 'OK') {
                this.dialog = true;
              this.ruleForm.orderNo = item.orderNo;
              this.ruleForm.receiverName = res.data.data.username;
              this.ruleForm.receiverTel = res.data.data.mobile;
              this.ruleForm.receiverAddress = res.data.data.mergerName + res.data.data.address;
              this.ruleForm.address = res.data.data.address;
            } else {
              this.$message.error(res.data.message)
            }
          })

        },
        getlogistId () {//获取物流信息
           if (this.ruleForm.logisticsNo) {
             this.Vloading = true;
             getLogisticsInfo(this.ruleForm.logisticsNo).then(res=>{
                if (res.data.code == 'OK') {
                    this.logistics = res.data.data;
                     this.disableda = false;
                     this.Vloading = false;
                } else {
                  this.$message.error(res.data.message)
                  this.Vloading = false;
                }
             })
           } else {
             this.$message.error('请输入快递单号!!')
              this.disableda = true;
           }
        },
        changeData (data) {
          this.dialog = data;
        },
        upForm () {
          this.$confirm('此操作将发货物品, 是否继续?', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
             var data = {
               orderNo : this.ruleForm.orderNo,
               receiverName : this.ruleForm.receiverName,
               receiverTel : this.ruleForm.receiverTel,
               receiverAddress : this.ruleForm.receiverAddress + ',' + this.ruleForm.address,
               logisticsCompanyCode : this.ruleForm.logisticsCompanyCode,
               logisticsNo : this.ruleForm.logisticsNo,
             }
             payshipments(data).then(res=>{
               if (res.data.code == 'OK') {
                 this.$message.success('发货成功')
                 this.getList({current:1,size:10})
                   this.dialog = false;
               } else {
                 this.$message.error(res.data.message)
               }
             })
           }).catch(() => {
             this.$message({
               type: 'info',
               message: '已取消发货'
             });
           });
        }
    }
}
</script>

<style lang="css" scoped>
    @import "../../../../styles/common.css";
    .searchBox{
        display: flex;
        flex-wrap: nowrap;
    }
    .input {
    /* width: 300px; */
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        margin-top: 10px;
    }
    .input p {
        margin-top: 10px;
    }
    label {
        line-height: 40px;
        color: #333;
        margin: 0 10px;
    }
    .el-input {
        width:200px;
        height:20px;
    }
</style>
